<template>
	<el-table :data="activePhaseLists" class="whole-parent-width" @select="select" @selectAll="select">
		<el-table-column type="selection" width="55" />
		<el-table-column label="阶段数量" type="index" width="80" align="center" />
		<el-table-column label="发布平台" prop="platform_type" align="center">
			<template #default="scope">
				<span>{{platform_type(scope.row.platform_type)}}</span>
			</template>
		</el-table-column>
		<el-table-column label="引流目标" align="center">
			<template #default="scope">
				<el-input type="number" v-model.number="scope.row.attraction_target" @input="attractionInput"></el-input>
			</template>
		</el-table-column>
		<el-table-column label="操作" align="center">
			<template #default="scope">
				<div class="active-phase-buttons">
					<span v-if="scope.row.id" class="active-phase-button col-50" @click="idClick(scope.row)">生书</span>
					<span v-if="scope.row.id && scope.row.article_list?.length>0" class="active-phase-button col-50" @click="articleClick(scope.row)">查看文章</span>
				</div>
			</template>
		</el-table-column>
	</el-table>
</template>

<script setup lang="ts">
import { toRefs } from "vue";
import { debounce } from "/@/utils/tools";
import { platform_type }from"/@/utils/dictionary"

let props = defineProps({
	activePhaseLists: {
		type: Array,
		default:  ()=>{
			return [];
		},
	},
})
let {activePhaseLists} =  toRefs(props);
let emits = defineEmits(["selectChange","attractionChange","goChange",'goArticle'])
const select = (value)=>{
	emits("selectChange",Array.isArray(value)? value:[value]);
}
const idClick=(value)=>{
    emits("goChange",value);
}
const articleClick = (value) => {
    emits("goArticle",value);
}
const attractionInput = debounce((value:any)=>{
	emits("attractionChange",value);
},1000)
</script>

<style scoped lang="scss">
.active-phase-buttons {
	display: flex;
	align-items: center;
	.active-phase-button {
		color: var(--el-color-primary);
		cursor: pointer;

		&.col-50 {
			display: block;
			width: 50%;
			text-align: center;
			padding:0 10px;
			box-sizing: border-box;
		}
	}
}
</style>
